<template>
  <el-row type="flex" class="video-marquee-container">
    <div class="video-marquee-mask">
      <el-row type="flex" class="video-marquee">
        <video-player
          role="item"
          :domId="item.uid"
          :id="`${item.uid}`"
          :stream="stream"
          :streamID="item.uid"
          :account="item.userName"
          :audio="Boolean(item.enableAudio)"
          :video="Boolean(item.coVideo)"
          v-for="(item, index) in list"
          :key="index"
        ></video-player>
      </el-row>
    </div>
  </el-row>
</template>

<script>
import VideoPlayer from './video-player'
import { roomStore } from '../utils/room'
export default {
  components: {
    VideoPlayer
  },
  props: ['stream', 'list'],
  data() {
    return {}
  },
  computed: {
    screenId() {
      const course = roomStore.state.course
      const teacher = roomStore.users.get(`${course.teacherId}`)
      let id = ''
      if (teacher) {
        id = teacher.screenId
      }
      return id
    },
    teacher() {
      const me = roomStore.state.me
      const course = roomStore.state.course
      if (!course.teacherId || !me.uid) return
      const teacherInfo = roomStore.state.users.get(`${course.teacherId}`)
      if (!teacherInfo) return
      // 当本地流为老师时
      if (me.uid == course.teacherId) {
        return {
          ...roomStore.state.rtc.localStream,
          account: teacherInfo.account,
          video: teacherInfo.video,
          audio: teacherInfo.audio,
          local: true
        }
      } else {
        // when peer teacher is online
        // 当远端流为老师时
        const teacherUid = roomStore.state.users.get(course.teacherId)
        if (!teacherUid) return null
        // when peer teacher stream is found
        // 当找到老师的音视频流时
        const remoteTeacherStream = roomStore.state.rtc.remoteStreams.get(`${teacherUid.uid}`)
        if (remoteTeacherStream) {
          return {
            ...remoteTeacherStream,
            account: teacherInfo.account,
            video: teacherInfo.video,
            audio: teacherInfo.audio
          }
        }
        return {
          streamID: course.teacherId,
          account: teacherInfo.account,
          video: teacherInfo.video,
          audio: teacherInfo.audio
        }
      }
    },
    students() {
      const me = roomStore.state.me
      // const course = roomStore.state.course
      const userAttrs = roomStore.state.users
      if (!me.uid || userAttrs.length === 0) return []
      // const teacherUid = course.teacherId
      const peerUsers = roomStore.state.rtc.users
      // exclude teacher and me and screenId
      // 排除老师，屏幕共享，和自己的uid
      let studentIds = peerUsers
      const studentStreams = []
      const myAttr = userAttrs.get(`${me.uid}`)
      // when i m student
      // 当自己是学生流时
      if (+me.role === 2) {
        if (myAttr && roomStore.state.rtc.localStream) {
          const _tmpStream = {
            ...roomStore.state.rtc.localStream,
            account: myAttr.account,
            video: myAttr.video,
            audio: myAttr.audio,
            local: true
          }
          studentStreams.push(_tmpStream)
        }
      }
      for (let studentId of studentIds) {
        const studentAttr = userAttrs.get(studentId[0])
        const stream = roomStore.state.rtc.remoteStreams.get(studentId[0])
        if (studentAttr) {
          let _tmpStream = {
            streamID: studentId[0],
            account: studentAttr.account,
            video: studentAttr.video,
            audio: studentAttr.audio
          }
          if (stream) {
            _tmpStream = {
              ...stream,
              streamID: studentId[0],
              account: studentAttr.account,
              video: studentAttr.video,
              audio: studentAttr.audio
            }
          }
          studentStreams.push(_tmpStream)
        }
      }
      return studentStreams
    }
  }
}
</script>

<style></style>
